<template>
  <div>
    <div class="front-notice"><el-icon><Bell /></el-icon>公告：{{ data.top }}</div>
    <div class="front-header">
      <div class="front-header-left">
        <img src="@/assets/img/img.png" alt="">
        <div class="title" style="color: white">图书借阅系统</div>
      </div>
      <div class="front-header-center" style="display: flex">
        <div style="width: 60%">
          <el-menu :default-active="router.currentRoute.value.path" router mode="horizontal">
            <el-menu-item index="/front/home">首页</el-menu-item>
            <el-menu-item index="/front/posts">图书社区</el-menu-item>
            <el-menu-item index="/front/activity">图书活动</el-menu-item>
            <el-menu-item index="/front/book">图书列表</el-menu-item>
            <el-menu-item index="/front/room">阅览室</el-menu-item>
          </el-menu>
        </div>
        <div style="width: 350px">
          <el-input clearable  v-model="data.name" placeholder="请输入名称查询" style="width: 240px; margin-right: 5px"></el-input>
          <el-button type="primary" @click="goPage('/front/book?name='+data.name)">搜索</el-button>
        </div>
      </div>

      <div class="front-header-right">
        <div v-if="!data.user.id">
          <el-button @click="router.push('/login')">登录</el-button>
          <el-button @click="router.push('/register')">注册</el-button>
        </div>
        <div v-else>
          <el-dropdown style="cursor: pointer; height: 60px">
            <div style="display: flex; align-items: center">
              <img style="width: 40px;height: 40px;border-radius: 50%;" :src="data.user.avatar">
              <span style="margin-left: 5px;color: white">{{ data.user.name }}</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/front/cart')">我的书单 </el-dropdown-item>
                <el-dropdown-item @click="router.push('/front/orders')">我的借书 </el-dropdown-item>
                <el-dropdown-item @click="router.push('/front/myPosts')">我的发帖 </el-dropdown-item>
                <el-dropdown-item @click="router.push('/front/sign')">我的报名 </el-dropdown-item>
                <el-dropdown-item @click="router.push('/front/mySeatReserve')">预约座位 </el-dropdown-item>
                <el-dropdown-item @click="router.push('/front/collect')">我的收藏 </el-dropdown-item>
                <el-dropdown-item @click="router.push('/front/person')">个人信息</el-dropdown-item>
                <el-dropdown-item @click="router.push('/front/password')">修改密码</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="main-body">
      <RouterView @updateUser="updateUser"/>
    </div>

    <Footer />
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { reactive } from "vue";
import request from "@/utils/request.js";
import Footer from "@/components/Footer.vue"

const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user')||'{}'),
  top:null,
  noticeData:[],
  name:null
})
const loadNotice = () => {
  request.get('/notice/selectAll').then(res=>{
    data.noticeData=res.data
    let i=0
    if (data.noticeData&&data.noticeData.length){
      data.top=data.noticeData[0].content
      setInterval(()=>{
        data.top=data.noticeData[i].content
        i++
        if (i === data.noticeData.length){
          i=0
        }
      },2500)
    }
  })
}
const goPage = (path) => {
  location.href=path
}
const logout = () => {
  localStorage.removeItem('xm-user')
  location.href='/login'
}
const updateUser = () => {
  data.user=JSON.parse(localStorage.getItem('xm-user')||'{}')
}
loadNotice()
</script>

<style scoped>
@import "@/assets/css/front.css";
</style>